<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <style>
        body {
            background-color: #efefef;
            width: 100%;
            height: 100%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .leftbar {
            height: 800px;
            background-color: yellowgreen;
        }
        .centerbar{
            height: 800px;
            {#background-color: red;#}
        }
        .rightbar{
            height: 800px;
            background-color: blue;
        }
        .container-fluid{
            padding: 0;
        }
        .recharge {
            background-color: #fff;
            padding:3px 20px;
            width: 100%;
            text-align: left;
        }
        .recharge:hover{
            background-color: #efefef;
        }
        footer{
            height: 65px;
            background-color: #efefef;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .row{
            width: 100%;
            height: 100%;
            margin-left:16px;
        }
        .row >li {
            position: relative;
            display: inline-block;
            width: 24%;
            height: 33%;
            background-color: red;
        }
        .row>li img{
            width: 100%;
            height: 100%;
        }
        .purchase {
            position: absolute;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="javascript:void(0);">欢迎您来到多美多购物商城，祝您购物愉快</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- 搜索框 -->
            <!--
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="javascript:void(0)">当前用户:</a></li>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user.username }} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><button type="button" class="btn recharge" data-toggle="modal" data-target="#myModal">充值</button></li>
                        <li><button type="button" class="btn recharge" data-toggle="modal" data-target="#myModal1">充值记录</button>
                        <li><button type="button" class="btn recharge" data-toggle="modal" data-target="#myModal2">订单记录</button></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="{% url 'account:change_password' %}">修改密码</a></li>
                        <li><a href="{% url 'account:logout' %}">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!-- 主体部分 -->
<div class="container-fluid">
    <div class="content">
        <div class="leftbar col-md-2"></div>
        <div class="centerbar col-md-8">
            <ul class="row">
                {% for commodity in commodity_list %}
                    <li>
                        <img src="{{ commodity.cover.url }}" alt="">
                        <div class="purchase">
                            <i style="font-weight: bolder;font-size: 16px;">价格：{{ commodity.price }} 元</i><br>
                            <a class="btn btn-info" href="{% url 'commodity:payment' %}?c_id={{ commodity.commodity_no }}">全额付款</a>
                            <a class="btn btn-info" href="{% url 'commodity:lucky' %}">幸运转盘</a>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="rightbar col-md-2"></div>
    </div>
</div>
<footer style="height: 60px;">
    <nav style="height: inherit;overflow: hidden;" aria-label="Page navigation">
        <ul class="pagination" style="margin-top: 15px;">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </ul>
    </nav>
</footer>
<!--充值 -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">充值</h4>
            </div>
            <form class="form-horizontal" action="{% url 'account:index' %}" method="post">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-xs-2 control-label">充值金额</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="inputEmail3" placeholder="充值金额" name="balance">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-info"  >确认</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 充值记录 -->
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">充值记录</h4>
      </div>
      <div class="modal-body">
          <iframe style="width:560px;height: 600px; " src="{% url 'account:recharge_history' %}" frameborder="0"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
{#        <button type="button" class="btn btn-primary">Save changes</button>#}
      </div>
    </div>
  </div>
</div>
<!-- 订单记录 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">订单记录</h4>
      </div>
      <div class="modal-body">
          <iframe style="width:560px;height: 600px; " src="{% url 'account:order_record' %}" frameborder="0"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
{#        <button type="button" class="btn btn-primary">Save changes</button>#}
      </div>
    </div>
  </div>
</div>


</body>
</html>
<script src="{% static 'js/jquery-3.3.1.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script>
    {% if messages %}
        {% for message in messages %}
            alert('{{ message }}');
        {% endfor %}
    {% endif %}
</script>

